<script>
import { reactive, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { public_status } from "../store/public_status";
import { useStore } from "../store/index";
import { Toast } from "vant";
export default {
  setup() {
    const show = ref(false);

    // # 数据中心
    let data = reactive({
      myname: "我可以",
      showedit: false,
      birthday: "1995年02月17日",

      change_show: false, // # 更改头像按钮
    });

    // # 用户数据
    let userId = localStorage.getItem("P4_userId");
    let userData = useStore().userData[userId];

    // # 路由配置
    let router = useRouter();

    // # 隐藏底部导航
    public_status().display = false;

    const currentDate = ref(new Date(1995, 1, 17));

    const formatter = (type, val) => {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    };

    // # 修改名字
    let change = (e) => {
      let name = e.target.value;
      if (name) {
        userData.name = name;
        data.showedit = false;
      }
    };

    // # 显示弹出框
    let setDate = () => {
      show.value = true;
    };

    // # 确认修改出生日期
    let confirm = () => {
      let timeStr = currentDate.value.getFullYear() + "年";
      timeStr +=
        currentDate.value.getMonth() < 9
          ? "0" + (currentDate.value.getMonth() + 1) + "月"
          : currentDate.value.getMonth() + 1 + "月";
      timeStr +=
        currentDate.value.getDate() <= 9
          ? "0" + currentDate.value.getDate() + "日"
          : currentDate.value.getDate() + "日";

      console.log(111111);
      data.birthday = timeStr;
      console.log(data.birthday);
      show.value = false;
    };

    let cancel = () => {
      show.value = false;
    };

    // # 更改用户头像
    let afterRead = (vl) => {
      data.change_show = false;
      Toast.loading({
        message: "上传中...",
        forbidClick: true,
        loadingType: "spinner",

        onClose: () => {
          Toast.success("修改成功");
          userData.imgUrl = vl.content;
        },
      });
    };

    return {
      data,
      userData,
      router,
      show,
      change,
      minDate: new Date(1952, 0, 1),
      maxDate: new Date(2010, 10, 1),
      currentDate,

      setDate,
      formatter,
      confirm,
      cancel,
      afterRead,
    };
  },
};
</script>

<template>
  <div class="accountView">
    <!-- 头部 -->
    <header class="header">
      <div class="back" @click="router.back()">
        <i class="iconfont icon-arrow-left"></i>
      </div>
      <div class="title">Account Control</div>
    </header>
    <!-- 头部 -->

    <!-- 头像设置 -->
    <div class="headimg">
      <img
        :src="
          userData.imgUrl
            ? userData.imgUrl
            : require('../assets/imgs/哈士奇.svg')
        "
        alt=""
      />
      <div class="right" @click="data.change_show = true">
        设置头像<span class="iconfont icon-jiantouyou"></span>
      </div>
      <van-uploader
        :after-read="afterRead"
        :class="['uploader', { show: data.change_show }]"
      >
        <div class="content">
          <i class="iconfont icon-jiahao"></i>
          <span>上传头像</span>
        </div>
      </van-uploader>
    </div>

    <!-- 用户名修改 -->
    <div class="username">
      <div class="nameleft">用户名:</div>
      <div
        class="nameright"
        v-show="!data.showedit"
        @click="data.showedit = true"
      >
        {{ userData.name ? userData.name : "新用户" }}
      </div>
      <input
        class="editname"
        v-show="data.showedit"
        type="text"
        :value="userData.name"
        @keyup.enter="change"
        @blur="change"
      />
    </div>

    <!-- 出生日期 -->
    <div class="birthday">
      <div class="left">
        <span>出生日期</span>
        <div class="date">{{ data.birthday }}</div>
      </div>
      <div class="right" @click="setDate">
        去设置<span class="iconfont icon-jiantouyou"></span>
      </div>

      <!-- 设置生日的弹出框 -->
      <van-popup v-model:show="show">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="设置出生日期"
          :columns-order="['year', 'month', 'day']"
          :formatter="formatter"
          :min-date="minDate"
          :max-date="maxDate"
          ref="gettime"
          @confirm="confirm"
          @cancel="cancel"
        />
      </van-popup>
    </div>

    <div class="btn"><button @click="router.back()">确认修改</button></div>
  </div>
</template>

<style lang="scss" scoped>
.accountView {
  overflow: hidden;
  min-height: 100vh;
  background: #f4f6fa;

  > header.header {
    height: 56px;
    line-height: 56px;
    text-align: center;

    background: #fff;

    position: sticky;
    top: 0;
    z-index: 10;

    > .back {
      position: absolute;
      left: 15px;
      top: 0;
      bottom: 0;
      margin: auto;

      width: 37px;
      height: 37px;
      line-height: 37px;
      border-radius: 50%;
      background: #f9f9f9;

      > i {
        text-align: center;
      }
    }

    > .title {
      font-size: 18px;
      font-weight: bold;
    }

    > .btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 15px;
      margin: auto;

      padding: 0 15px;
      height: 32px;
      line-height: 32px;
      text-align: center;

      border-radius: 15px;
      background: #f9f9f9;
    }
  }

  > .headimg {
    margin-top: 20px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    background-color: #fff;
    margin-bottom: 20px;

    position: relative;
    .uploader {
      position: absolute;
      top: 0;
      bottom: 0;
      right: -90px;
      z-index: 10;

      margin: auto;
      background: #333;
      color: #fff;

      width: 85px;
      height: 40px;
      border-radius: 5px;

      transition: right 0.5s;

      &.show {
        right: 15px;
      }

      .content {
        width: 85px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          margin-right: 3px;
        }
      }
    }

    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .right {
      font-size: 10px;
      color: #b3b4b5;
      display: flex;
      align-items: center;

      .icon-jiantouyou {
        font-size: 16px;
        color: #656867;
        margin-left: 10px;
      }
    }
  }

  > .username {
    padding: 0 15px;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #232323;
    font-weight: 600;

    .nameleft {
      padding-right: 30px;
    }

    .nameright {
      font-size: 16px;
    }

    .editname {
      border: 0;
      border-radius: 0;
      border-bottom: 1px solid #c0c0c0;
      height: 40px;
      font-size: 16px;
      font-weight: 600;
      columns: #333;
    }
  }

  > .birthday {
    padding: 0 15px;
    margin-top: 20px;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: #232323;
    font-weight: 600;

    .left {
      display: flex;

      .date {
        padding: 0 15px;
      }
    }

    .right {
      font-size: 10px;
      color: #b3b4b5;
      font-weight: 500;
      display: flex;
      align-items: center;

      .icon-jiantouyou {
        font-size: 16px;
        color: #656867;
        margin-left: 10px;
      }
    }
  }

  > .btn {
    padding: 40px 20px;

    button {
      width: 100%;
      height: 50px;
      background-color: #3bb291;
      border: #3bb291;
      border-radius: 10px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
    }
  }

  ::v-deep .van-picker {
    width: 300px;
  }
}
</style>